<template>
	<view @touchmove.stop.prevent="() => {}" v-if="startPages">
		<view class="frame1"></view>
		<view class="frameEvn">
		<view class="frameEvnTitle">{{list[index+parseInt(queryType)].title}}</view>
		<view class="frameEvnContent">{{list[index+ parseInt(queryType) ].content}}<text style="color: #2f8bc1;">{{list[index+parseInt(queryType)].status}}</text>{{list[index+parseInt(queryType)].text}}</view>
		<view  class="frameEvnImg"></view>
		<!-- @click="start()" -->
		<view class="frameEvnButton" @click="start()">开始评分</view>
		</view>
		<u-mask :show="show" style="display: flex;flex-direction:column;align-items: center;justify-content: center;">
			<view class="warp">
				<!-- <image src="/static/hotel/组 11930.png" style="width: 527rpx;height: 457rpx;position: absolute;"></image> -->
				<view class="warp-content">为了精准测量环境分贝，我们需要您的手机麦克风权限。</view>
				<view style="color: #545454;font-size: 24rpx;position: relative;width: 462rpx;margin-left: 32rpx;margin-top: 40rpx;">*仅用于测量周围环境的噪音分贝值，帮助您了解当前环境的噪音水平</view>
			</view>
			<view class="warp-button">立即授权</view>
			<!-- <image src="/static/hotel/组 11933.png" style="width: 63rpx;height: 64rpx;margin-top: 52rpx;" @tap="show=!show"></image> -->
		</u-mask>
	</view>
	<view @touchmove.stop.prevent="() => {}" v-else>
		<view class="frame">
			<view class="frame-title">
				<view class="frame-title-content">{{list[index+ parseInt(queryType)].title}}</view>
				<text>{{list[index+ parseInt(queryType) ].str}}<text style="color: #2f8bc1;">{{list[index+parseInt(queryType)].status}}</text>{{list[index+parseInt(queryType)].strText}}</text>
			</view>
			<view class="frame-img">
				<view class="frame-image">{{num}}s</view>
				<text>倒计时</text>
			</view>
		</view>
		
		<view class="frame-center">
			<view class="frame-center-title">{{radio}}<text>db</text></view>
			
			<view class="frame-center-icon">
				<!-- <image src="/static/hotel/eb850cc927b7d5dd4ce49c624188b14.png" style="width: 468rpx;height: 78rpx;"></image> -->
			</view>
			
			<view class="frame-center-content">
				<text>{{parseInt(radio)-2}}</text>
				<text style="margin-left: 90rpx;">{{parseInt(radio)-1}}</text>
				<text style="margin-left: 85rpx;">{{parseInt(radio)}}</text>
				<text style="margin-left: 90rpx;">{{parseInt(radio)+1}}</text>
				<text style="margin-left: 85rpx;">{{parseInt(radio)+2}}</text>
			</view>
			
			<view class="frame-buttom">
				<view class="frame-buttom-icon"></view>
				<view class="frame-buttom-title">当前测评</view>
				<view class="frame-buttom-content">
					<view class="frame-buttom-content-text">{{max}}<text>db</text></view>
					<view class="frame-buttom-content-icon"></view>
					<view class="frame-buttom-content-name">最大值</view>
				</view>
				
				<view class="frame-buttom-content">
					<view class="frame-buttom-content-text">{{mean}}<text>db</text></view>
					<view class="frame-buttom-content-icon" style="background: #5EFFDE;"></view>
					<view class="frame-buttom-content-name">平均值</view>
				</view>
				
				<view class="frame-buttom-content">
					<view class="frame-buttom-content-text">{{min}}<text>db</text></view>
					<view class="frame-buttom-content-icon" style="background: #FFEA5E;"></view>
					<view class="frame-buttom-content-name">最小值</view>
				</view>
			</view>
			
			<view class="button-frame">
				<view v-if="num!=0">
				<view class="button-frame-first" @click="stop" v-if="stopbutton">暂停</view>
				<view class="button-frame-first" @click="start" v-if="!stopbutton">开始</view>
				</view>
				<view class="button-frame-first" @click="afresh" v-if="num==0">重新测试</view>
				<view class="button-frame-second" @click="" v-if="num!=0">测试中</view>
				<!--   -->
				<view class="button-frame-second" @click="submit" v-if="num==0">完成，下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				startPages:true,
				num:10,
				timer:null,
				interval: null,
				MediaRecorder: null,
				filePath: '',
				radio: 0,
				fileList: [],
				code: null,
				list:[
					{
						title:'环境噪声',
						content:'请确认外部环境噪音是否稳定，将手机伸出室外，手机保持稳定，点击开始测试。',
						status:'',
						text:'',
						str:'根据指引，',
						strText:'将手机伸出室外，自动捕捉噪声值'
					},
					{
						title:'背景噪声',
						content:'请确认外部环境噪音是否稳定，手机保持稳定，请关闭门窗，',
						status:'关闭',
						text:'空调、新风，保持安静，点击开始测试。',
						str:'根据指引，',
						strText:'室内空调等，自动捕捉噪音值'
					},
					{
						title:'背景噪声',
						content:'请确认外部环境噪音是否稳定，手机保持稳定，请关闭门窗，',
						status:'打开',
						text:'空调、新风，保持安静，点击开始测试。',
						str:'根据指引，',
						strText:'空调，新风等，自动捕捉噪音值'
					},
				],
				index:0,
				show:false,
				stopbutton:true,
				one:0,
				max:0,
				mean:0,
				min:0,
				queryType:0,			//问题类型
				questionList:[],		//问题列表
				comment:[],				//暂评数据
				id:0,					//酒店id
				hotel:{},				//酒店详情
				queryName:0,			//指定问题id
			}
		},
		onLoad(option) {
			this.initPermissions();
			console.log('初始化',option)
			if('queryType' in option){
				this.queryType = option.queryType
			}
			if('id' in option){
				this.id = option.id
			}
			if('queryName' in option){
				this.queryName = option.queryName
			}
			if('index' in option){
				if(parseInt(option.index) == 0){
					this.index = parseInt(option.index)
				}else{
					this.index = parseInt(option.index) - 1
				}
				
			}
			
			this.QuestionList()
			// this.start()
			// this.dbstart()
		},
		onShow() {
			// this.start()
		},
		computed: {
			permission() {
				return ({
					"-1": '永久拒绝',
					"0": '临时拒绝',
					"1": '允许'
				})[this.code]
			}
		},
		
		// 返回到上一页，清除定时器，防止离开此页面后，计时器还在执行
		onUnload() {
			clearInterval(this.timer);
			clearInterval(this.interval);
			// 释放录音
			this.MediaRecorder.release();
			this.MediaRecorder = null;
			this.fileList = []
		},
		methods: {
			// start(){
			// },
			// stop(){
			// 	var that = this
			// 	clearInterval(that.timer)
			// },
			// 重新开始
			afresh(){
				var that = this
				that.num = 10
				that.fileList = []
				this.start()
			},
			
			async initPermissions() {
				plus.android.requestPermissions(['android.permission.RECORD_AUDIO'], e => {
					console.log('输出内容',e)
					if (e.deniedAlways.length > 0) { //权限被永久拒绝
						this.code = -1;
					}
					if (e.deniedPresent.length > 0) { //权限被临时拒绝
						this.code = 0;
					}
					if (e.granted.length > 0) { //权限被允许
						this.code = 1;
					}
				});
			},
			// 每100毫秒获取最大的振幅
			getDecibel() {
				this.interval = setInterval(() => {
					if (this.MediaRecorder) {
						let radio = this.MediaRecorder.getMaxAmplitude();
						if (radio > 1) {
							radio = 20 * Math.log10(radio); // 计算分贝
						}
						if(radio != 0){
							this.fileList.push(radio.toFixed(1));
						}
						this.radio = radio.toFixed(1);
						this.mean = this.average(this.fileList)
						this.max = ( Math.max.apply(null, this.fileList)).toFixed(1)
						this.min = ( Math.min.apply(null, this.fileList)).toFixed(1)
						
					}
				}, 100);
			},
			start() {
				if (this.code !== 1) return this.initPermissions();
				if (this.MediaRecorder) {
					this.MediaRecorder.release();
					this.MediaRecorder = null;
				}
				this.startPages = false
				// if(this.one > 0){
					this.stopbutton = true
				// }
				// this.one ++
				var recorder = plus.android.importClass('android.media.MediaRecorder');
				// 创建录音媒体对象
				var MediaRecorder = new recorder();
				// 设置音频源
				MediaRecorder.setAudioSource(recorder.AudioSource.DEFAULT);
				// 设置输出编码
				MediaRecorder.setOutputFormat(recorder.OutputFormat.DEFAULT);
				// 设置编码格式
				MediaRecorder.setAudioEncoder(recorder.AudioEncoder.DEFAULT);
				// 设置输出路径
				let filePath = plus.io.convertLocalFileSystemURL('_doc') + Date.now() + '.mp3';
				MediaRecorder.setOutputFile(filePath);
				MediaRecorder.prepare();
				MediaRecorder.start();
				this.MediaRecorder = MediaRecorder;
				var that = this
				clearInterval(that.timer)
				that.timer = setInterval(function(){
					that.num--
					if(that.num){
					}else{
						// that.timer=clearInterval(that.timer)
						that.stop()
					}
				},1000)
				this.getDecibel();
			},
			stop() {
				// 清除计时器
				var that = this
				clearInterval(that.timer)
				clearInterval(that.interval);
				// 暂停录音
				that.MediaRecorder.stop();
				// 释放录音
				this.MediaRecorder.release();
				this.MediaRecorder = null;
				this.stopbutton = false
			},
			// 求平均值
			average(arg){
				console.log(arg)
				let total = 0
				for (let item of arg) {
					// console.log(item)
					total = total + parseFloat(item)
				}
				
				// console.log('输出',total,total/arg.length)
			    return (total/arg.length).toFixed(1);
			},
			
			// 获取问题列表和暂评
			async QuestionList(){
				
				var data = {
					page:1,
					limit:100,
					queryType:this.queryType,
					queryId:this.queryName
					// ParentId:this.queryName
				}
				
				var res = await this.getdatas(data, '/api/Hotel/QuestionList')
				this.questionList = res.data.items
				
				
				var params = {
					queryId:this.id
				}
				
				var comment = await this.getdatas(params, '/api/Hotel/GetComment')
				
				if(comment.data.iscomment){
					this.comment = comment.data.comment
				}
				var hotel = await this.getdatas(params, '/api/Hotel/HotelDetail')
				this.hotel = hotel.data
				console.log('获取酒店详情',hotel)
				
				console.log('获取问题列表',this.questionList,this.comment,this.hotel)
			},
			// 提交
			async submit(){
				var questionList = this.questionList
				var comment = this.comment
				var hotel = this.hotel
				comment.answerlist = []
				if(comment.Answer){
					const list = JSON.parse(comment.Answer)
					list.forEach((element,index)=>{
						console.log('输出',element)
						comment.answerlist.push({"Id": element.id,"clist":[{"Id": element.list[0].id }]})
					})
				}
				
				var answerlist = {"Id": questionList[this.index].Id,"clist":[{"Id": questionList[this.index].clist[this.evnIndex()].Id }]}
				for (let key in comment.answerlist) {
					if(comment.answerlist[key].Id == answerlist.Id){
						comment.answerlist.splice(key, 1)
					}
				}
				// return
				comment.answerlist.push(answerlist)
				// console.log('获取内容',comment.answerlist)
				// return;
				var data = {
					Name:hotel.hotelname,
					ImgUrl:hotel.hotelimg,
					Province:hotel.Province,
					City:hotel.City,
					Address:hotel.hotelAddress,
					comment:comment
				}
				var res = await this.getdatas(data, '/api/Hotel/SumbitHotel')
				if(res.code == 200){
					this.index ++
					this.startPages = true
					this.num = 10
					if(this.index == this.questionList.length){
						uni.navigateBack({
							delta: 1
						});
					}
				}
				console.log('提交内容',data,res)
			},
			
			// 根据平均值计算答案下标
			// getAnswerIndex(){
			// 	let index = this.index
			// 	if(index == 0){
			// 	  	this.evnIndex()
			// 	}else if(index == 1){
					
			// 	}
			// },
			// 
			// 环境噪音答案下标
			evnIndex(){
				console.log('问题列表',this.questionList[this.index].clist)
				const clist = this.questionList[this.index].clist
				if(this.mean >= clist[0].Start && this.mean <= clist[0].Done){
					return 0
				}else if(this.mean >= clist[1].Start && this.mean <= clist[1].Done){
					return 1
				}else if(this.mean >= clist[2].Start && this.mean <= clist[2].Done){
					return 2
				}else if(this.mean >= clist[3].Start && this.mean <= clist[3].Done){
					return 3
				}else if(this.mean >= clist[4].Start && this.mean <= clist[4].Done){
					return 4
				}else if(this.mean >= clist[5].Start && this.mean <= clist[5].Done){
					return 5
				}else{
					return 0
				}
			},
			
			// 背景噪音答案下标
			// backIndex(){
			// 	console.log('问题列表',this.questionList[this.index].clist)
			// 	const clist = this.questionList[this.index].clist
			// 	if(this.mean <= 55){
			// 		return 0
			// 	}else if(this.mean >= 55 && this.mean <= 60){
			// 		return 1
			// 	}else if(this.mean >= 60 && this.mean <= 65){
			// 		return 2
			// 	}else if(this.mean >= 65 && this.mean <= 70){
			// 		return 3
			// 	}else if(this.mean >= 70 && this.mean <= 75){
			// 		return 4
			// 	}else if(this.mean >= 75){
			// 		return 5
			// 	}else{
			// 		return 0
			// 	}
			// }
		}
	}
</script>

<style  lang="less">
	
	.frame{
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 71rpx;
		display: flex;
		justify-content: space-between;
		width: 750rpx;
		// height: 1624rpx;
		background: linear-gradient( 180deg, #003460 0%, #3470AD 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		align-items: center;
		.frame-title{
			display: flex;
			flex-direction: column;
			margin-top: 30rpx;
			.frame-title-content{
				width: 432rpx;
				height: 67rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 48rpx;
				color: #FFFFFF;
				// line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			
			text{
				margin-top: 12rpx;
				width: 511rpx;
				height: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				// line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		
		.frame-img{
			display: flex;
			flex-direction: column;
			align-items: center;
			.frame-image{
				// background:  url('/static/hotel/2bab773085e3a8d2138156d6b05b350.png');
				width: 98rpx;
				height: 98rpx;
				background: linear-gradient( 180deg, #008FD7 0%, #46C1FF 100%);
				box-shadow: 0rpx 0rpx 14rpx 1rpx #008FD7, inset 0rpx 0rpx 21rpx 1rpx #CFF3FF;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
			text{
				margin-top: 10rpx;
				width: 77rpx;
				height: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
	}
	
	.frame-center{
		margin-top: -10rpx;
		width: 750rpx;
		height: 1242rpx;
		background: #003460;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		
		.frame-center-title{
			margin-top: 66rpx;
			width: 188rpx;
			// height: 128rpx;
			font-family: Microsoft YaHei, Microsoft YaHei;
			font-weight: bold;
			font-size: 85rpx;
			color: #FFFFFF;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			
			text{
				width: 66rpx;
				height: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		.frame-center-icon{
			width: 468rpx;
			margin-top: 50rpx;
		
		}
			
		.frame-center-content{
			display: flex;
			width: 488rpx;
			text{
				margin-top: 16rpx;
				// width: 32rpx;
				height: 30rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #A8BAC8;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
	}
	
	.frame-buttom{
		margin-top: 169rpx;
		width: 686rpx;
		height: 279rpx;
		background: #265a86;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		padding-left: 7rpx;
		padding-right: 32rpx;
		display: flex;
		flex-wrap: wrap;
		
		.frame-buttom-icon{
			margin-top: 37rpx;
			margin-left: 25rpx;
			width: 10rpx;
			height: 43rpx;
			background: #8FE4FF;
			border-radius: 5rpx 5rpx 5rpx 5rpx;
		}
		
		.frame-buttom-title{
			margin-top: 33rpx;
			margin-left: 16rpx;
			width: 400rpx;
			height: 50rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 36rpx;
			color: #8FE4FF;
			line-height: 46rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.frame-buttom-content{
			margin-left: 25rpx;
			width: 191rpx;
			height: 132rpx;
			background: #003460;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
		}
		.frame-buttom-content-text{
			margin-left: 33rpx;
			margin-top: 20rpx;
			// width: 83rpx;
			width: 161rpx;
			height: 56rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #8FE4FF;
			// line-height: 123rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			
			text{
				margin-left: 12rpx;
				width: 28rpx;
				height: 33rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #BEBEBE;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		.frame-buttom-content-icon{
			margin-top: -20rpx;
			margin-left: 30rpx;
			width: 15rpx;
			height: 15rpx;
			background: #FF5E5E;
			border-radius: 50%;
		}
		.frame-buttom-content-name{
			width: 72rpx;
			margin-top: -20rpx;
			// height: 33rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #D9D9D9;
			// line-height: 36rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			margin-left: 16rpx;
		}
	}
	
	.button-frame{
		margin-top: 218rpx;
		display: flex;
		
		.button-frame-first{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 256rpx;
			height: 82rpx;
			background: #3470AD;
			border-radius: 39rpx 0rpx 0rpx 39rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
			font-weight: normal;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 63rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.button-frame-second{
			margin-left: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 253rpx;
			height: 82rpx;
			background: #008FD7;
			border-radius: 0rpx 39rpx 39rpx 0rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
			font-weight: normal;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 63rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}
	
	
	.frame1{
			top: -100rpx;
			position: absolute;
			width: 100vw;
			height: 110vh;
			// background-image:url('/static/hotel/minback.png');
			/* 背景图垂直、水平均居中 */
		    background-position: center center;
		    /* 背景图不平铺 */
		    background-repeat: no-repeat;
		    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
		    background-attachment: fixed;
		    /* 让背景图基于容器大小伸缩 */
		    background-size: cover;
		    /* 设置背景颜色，背景图加载过程中会显示背景色 */
		    background-color: #464646;
			z-index: 100;
	}
	.frameEvn{
		margin-left: 32rpx;
		top: 50rpx;
		z-index: 200;
		position: relative;
		.frameEvnTitle{
			width: 432rpx;
			height: 67rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 48rpx;
			color: #FFFFFF;
			// line-height: 36rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.frameEvnContent{
			margin-top: 12rpx;
			width: 686rpx;
			height: 76rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
		.frameEvnImg{
			margin-top: 117rpx;
			margin-left: 101rpx;
			width: 485rpx;
			height: 485rpx;
			// border: 1rpx solid #8FE4FF;
		}
		.frameEvnButton{
			margin-top: 146rpx;
			margin-left: 143rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 400rpx;
			height: 88rpx;
			background: #8fe4ff;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			// width: 144rpx;
			// height: 36rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
			font-weight: normal;
			font-size: 36rpx;
			color: #003460;
			line-height: 43rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}
	.warp{
		width: 527rpx;
		height: 457rpx;
		margin-top: 150rpx;
		.warp-content{
			position: relative;
			padding-left: 20rpx;
			padding-right: 20rpx;
			padding-top: 10rpx;
			padding-bottom: 10rpx;
			width: 462rpx;
			// height: 78rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			background: linear-gradient(to bottom,#E9F3FF, #C8F1FF);;
			border-radius: 15rpx;
			margin-left: 32rpx;
			margin-top: 198rpx;
		}
	}
	.warp-button{
		margin-top: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 400rpx;
		height: 88rpx;
		background: #008FD7;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-family: SourceHanSansCN-Regular, SourceHanSansCN-Regular;
		font-weight: normal;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 43rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
</style>
